<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form>
        <fieldset>
            <legend>分度读取文件：</legend>
            <input type="file" id="File" />
            <input type="button" value="中断" id="Abort" />
            <p>
                <label>读取进度：</label><progress id="Progress" value="0" max="100"></progress>
            </p>
            <p id="Status"></p>
            <p id="Percent"></p>
        </fieldset>
    </form>


    <form method="POST" name="form" action="/mupload/upload/" enctype="multipart/form-data">
        <input type='hidden' name='csrfmiddlewaretoken' value='' />
        <input id='file' type='file' name='file' onchange="" />
        <input id='button' name='submit' type='button' value="上传" onclick="chunk_upload(this)"/>
        </form>


    <script>
        // 读取一段触发一段，直到都去读完毕
        var h = {
    init: function() {
        var me = this;
         
        document.getElementById('File').onchange = me.fileHandler;
        document.getElementById('Abort').onclick = me.abortHandler;
         
        me.status = document.getElementById('Status');
        me.progress = document.getElementById('Progress');
        me.percent = document.getElementById('Percent');
         
        me.loaded = 0;
        //每次读取1M
        me.step = 1024 * 1024;
        me.times = 0;
    },
    fileHandler: function(e) {
        var me = h;
         
        var file = me.file = this.files[0];
         
        var reader = me.reader = new FileReader();
         
        //总大小
        me.total = file.size;
         
        reader.onloadstart = me.onLoadStart;
        reader.onprogress = me.onProgress;
        reader.onabort = me.onAbort;
        reader.onerror = me.onerror;
        reader.onload = me.onLoad;
        reader.onloadend = me.onLoadEnd;
        //读取第一块
        me.readBlob(0);
    },
    onLoadStart: function() {
        var me = h;
    },
    onProgress: function(e) {
        console.log(e,'处理progress事件。该事件在读取Blob时触发。onProgress=》e',e.loaded,'e.loaded')
        var me = h;
         
        me.loaded += e.loaded;
        //更新进度条
        me.progress.value = (me.loaded / me.total) * 100;
        me.percent.innerHtml=  me.progress.value;
    },
    onAbort: function() {
        var me = h;
    },
    onError: function() {
        var me = h;
         
    },
    onLoad: function() {
        var me = h;
        console.log(me,'处理load事件。该事件在读取操作完成时触发。me',me.loaded , me.total,'me.loaded / me.total')
        if(me.loaded < me.total) {
            me.readBlob(me.loaded);
        } else {
            me.loaded = me.total;
        }
    },
    onLoadEnd: function() {
        var me = h;
         
    },
    readBlob: function(start) {
        var me = h;
         
        var blob,
            file = me.file;
         
        me.times += 1;
         
        var blobSlice =
    File.prototype.slice ||
    File.prototype.mozSlice ||
    File.prototype.webkitSlice;

        // if(file.webkitSlice) {
        //     blob = file.webkitSlice(start, start + me.step + 1);
        // } else if(file.mozSlice) {
        //     blob = file.mozSlice(start, start + me.step + 1);
        // }else{
        //     blob = file.size(start, start + me.step + 1);
        // }
        blob=blobSlice.call(file, start,  start + me.step + 1)
        // me.reader.readAsText(blob);
        me.reader.readAsArrayBuffer(blob);

    },
    abortHandler: function() {
        var me = h;
         
        if(me.reader) {
            me.reader.abort();
        }
    }
};
 
h.init();

    </script>

    <script>
        var fileSplitSize = 1024 * 1024;
var start=0,end=0;
var i=0;
// 文件段上传
function chunk_upload(button){
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("POST", "/chunk_upload/upload/", false);
xmlhttp.setRequestHeader("X-CSRFToken", button.form['csrfmiddlewaretoken'].value);
var f = button.form;
var file = f['file']['files'][0];
var size=file.size;
end=start+fileSplitSize;
if(end>size){
i=-1;
end=size;
}else{
i+=1;
end=end;
}
　//按大小切割文件段
var blob = file.slice(start, end);
xmlhttp.setRequestHeader('charset','utf-8');
// xmlhttp.setRequestHeader("fileMD5", fileMD5);
xmlhttp.setRequestHeader("start", start);
xmlhttp.setRequestHeader("end", end);
xmlhttp.send(blob);
if(xmlhttp.status==200){
     if(end==size){
          var backtext=xmlhttp.responseText; alert(backtext); }
          else{
               alert("上传完成第"+i+"段") 
          start=end; chunk_upload(button); } 
        }
        else{ alert("上传错误");
         chunk_upload(button); }
}
    </script>
</body>
</html>